<template>
        <div class="oiuy"  v-if="skeleton" :style="{'background': 'url('+backPath+')'}">
            <div class="content">
                <h1 style="font-weight: bolder;font-size: 2.5rem;margin-bottom: 5px">
                    {{disposition}}
                </h1>
                I Love You🥰
            </div>
            <img class="me" alt="" title="小黎站长" src="/img/common/user_s.jpg">
            <img class="she" alt="" title="余妹呀" src="/img/common/user_h.jpg">
        </div>
        <div v-else class="oiuy">
            <CircleLoading></CircleLoading>
        </div>
    <div style="position: relative">
        <div class="time">
            <p class="title">我们一起走过</p>
            <div   :class="{'global_font':$store.state.nowTime==='moon'}" v-if="totalTime" class="time_clock">
                <span class="mark">共</span>
                <span>{{ n_time.n_year }}</span>
                <span class="mark">年</span>
                <span>{{ n_time.n_day <10 ? '0'+n_time.n_day : n_time.n_day  }}</span>
                <span class="mark">天</span>
                <span>{{ n_time.n_hour <10 ? '0'+n_time.n_hour : n_time.n_hour  }}</span>
                <span class="mark">小时</span>
                <span>{{ n_time.n_minute<10 ? '0'+n_time.n_minute : n_time.n_minute  }}</span>
                <span class="mark">分钟</span>
                <span>{{ n_time.n_second <10 ? '0'+n_time.n_second : n_time.n_second  }}</span>
                <span class="mark">秒</span>
            </div>
            <div v-else>
                 <div class="characters" >
                     <span v-for="(item,index) in characters" :key="index"  :style="{'--i':((index+1)*0.2)+'s'}" class="characters_li">
                         {{item}}
                     </span>
                 </div>
            </div>
        </div>

        <div  :style="{ 'color': $store.state.nowTime==='moon' ? '#fff' : '#8f8c8c'}" class="title_">
            <img src="/img/common/aixin.png" alt="">
            此生不换
            <img src="/img/common/aixin.png" alt="">
        </div>
        <div class="choose" >
            <a  @click="wordPad_">
                <LoveCards
                        :background="background"
                        :card="'/img/common/love1.png'"
                        class="variation">
                <template v-slot:title> <p>祝福板</p> </template>
                <template v-slot:content> <p slot="">写下对我们的祝福</p> </template>
                </LoveCards>
            </a>
            <a >
                <LoveCards
                    :background="background"
                    :card="'/img/common/love2.png'"
                    class="variation">
                    <template v-slot:title> <p>点点滴滴</p> </template>
                    <template v-slot:content> <p slot="">我们的恋爱日常</p> </template>
                </LoveCards>
            </a>
            <a > <LoveCards
                :background="background"
                :card="'/img/common/love3.png'"
                class="variation">
                <template v-slot:title > <p>Love Matters</p> </template>
                <template v-slot:content> <p  id="__blessing">一件不落的完成</p> </template>
            </LoveCards></a>
        </div>
    </div>
    <LoveTitle :title="love_title" >祝福留言</LoveTitle>
    <LoveNavigation @click="wordPad_" ></LoveNavigation>
   <div v-show="wordPad" class="replies">
     <div style="position: relative;width: 100%;height: 100%" >
         <span @click="wordPad_">x</span>
         <WordPad @handleCommentAdd="handleCommentAdd"></WordPad>
     </div>
   </div>
    <BlessingMessage
        :love="love"
        :comments_length="comments_length"
    ></BlessingMessage>
    <LoveTitle :title="love_title" style="margin-top: 40px" >点点滴滴</LoveTitle>
    <LoveEveryday ></LoveEveryday>
    <LoveTitle :title="love_title" style="margin-top: 40px" >Love Matters</LoveTitle>
    <LoveMatters></LoveMatters>
    <div
      :style="{ 'color': $store.state.nowTime==='moon' ? '#fff' : '#8f8c8c','margin-top':'50px'}"
      class="title_">
        <img src="/img/common/aixin.png" alt="">
        遇见你是我这辈子的惊喜
        <img src="/img/common/aixin.png" alt="">
    </div>
</template>

<script>

import SiteInformation from "@/components/PublicComponents/SiteInformation.vue";
import dayjs from 'dayjs'
import LoveCards from "@/components/love/LoveCards.vue";
import BlessingMessage from "@/components/love/BlessingMessage.vue";
import LoveNavigation from "@/components/love/LoveNavigation.vue";
import CommentReplies from "@/components/detail/CommentReplies.vue";
import WordPad from "@/components/love/WordPad.vue";
import api from "@/api";
import LoveEveryday from "@/components/love/LoveEveryday.vue";
import LoveMatters from "@/components/love/LoveMatters.vue";
import LoveTitle from "@/components/love/LoveTitle.vue";
import HeadImage from "@/components/PublicComponents/HeadImage.vue";
import CircleLoading from "@/components/PublicComponents/CircleLoading.vue";
import LoveMattersContent from "@/components/love/LoveMattersContent.vue";
export default {
    name: "loveSpace",
    components: {
        LoveMattersContent,
        CircleLoading,
        HeadImage,
        LoveTitle,
        LoveMatters,
        LoveEveryday, WordPad, CommentReplies, LoveNavigation, BlessingMessage, LoveCards, SiteInformation},
    data(){
        return{
            backPath: "",
            disposition:'',
            characters:"那些年的风风雨雨",
            background:"/img/common/aiqingniao.png",
            n_time:{
                n_second:'',
                n_year:'0',
                n_day:'',
                n_hour:'',
                n_minute:'',
            },
            totalTime:false,
            wordPad:false,
            love:[],
            index:1,
            comments_length:"",
            love_title:"/img/common/happing.png",
            timer:"",
            skeleton:true,
        }
    },
    mounted() {
        //分页获取祝福评论
        api.loveGet(this.index).then((res)=>{
            this.love =  res.data.data[0];
            this.comments_length = res.data.data[1]
        })
        this.getTime();
        let writing = [{options:"",content:""}];

        setTimeout(()=>{
            writing = JSON.parse(window.localStorage.getItem("DataContent"));
            this.backPath=writing[17].content;
            this.disposition = writing[18].content;
        },200)

    },
    watch:{
        backPath(newValue,oldValue){
            if(newValue !== ""){
                setTimeout(()=>{
                     this.skeleton = true;
                },900)
            }
        }

    },
    methods:{
        getTime(){
            this.timer = setInterval(()=>{
                let date = new Date();
                this.n_time.n_year = date.getFullYear()-2022;
                this.n_time.n_second = date.getSeconds();
                let day=0;
                for(let i=2022;i<date.getFullYear();i++){
                    if ((0 === i % 4 && i % 100 !== 0) || (0 === i % 400)){
                        day++;
                    }
                }
                //总时间
                let timed = (Math.floor(( Date.now()-Date.parse("2022/7/3 10:40"))/1000))
                //天
                this.n_time.n_day = Math.floor(timed / 86400)-(365*this.n_time.n_year)- day;
                //小时
                this.n_time.n_hour =Math.floor((timed % 86400) / 3600);
                //分钟
                this.n_time.n_minute = Math.floor(((timed % 86400) % 3600) / 60);
            },1000)
            const date1 = dayjs('2022-01-02 10:20:20')
            const date2 = dayjs('2023-07-10 13:18:20')
            date1.diff(date2) // 20214000000
            date1.diff(date2, 'month', true) //
            setTimeout(()=>{
                this.totalTime = true;
            },3000)
        },
        wordPad_(){
            this.wordPad = !this.wordPad
        },
        handleCommentAdd(content){
               alert("发布成功")
               this.$router.replace({path:'/loveBlankPage'});
        }
    },
    beforeDestroy() {
        if (this.timer) {
            clearInterval(this.timer); //关闭
        }
    }
}
</script>

<style scoped>
.oiuy{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50vh;
    background-position: center ;
    margin-bottom: 15px;
    animation: gradients .8s linear forwards ;
    background-size: cover !important;
}
.oiuy .content{
    text-align: center;
    color: #f8f4f4;
    text-shadow: 5px 5px 5px #383636;
}
.oiuy .content p{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
    color: #efe3e6;
    font-size: 1.5rem;
}
.variation{

}
.me,.she{
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translateY(-50%);
    width: 5vw;
    min-width: 60px;
    aspect-ratio: 1;
    border-radius: 50%;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2),  0 0 8px 2px rgba(255, 255, 255) !important;

}
.she{
    left: auto;
    right: 30%;

}
.love_back{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50vh;
    aspect-ratio: 16/9;

}
.time{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 30vh;
}
.title{
    font-size: 20px;
    background-image:-webkit-linear-gradient(45deg,red,#fd8403,yellow);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
     margin-bottom: 20px;
}
.time span{
    font-size: 40px;
    text-shadow: 0 0 10px #8f8c8c;
    font-family:'Xc Font','PingFang SC','Noto Serif SC','Hiragino Sans GB','Fira Mono','Microsoft YaHei',Arial,sans-serif
}
.mark{
    font-size: 18px !important;
}
.choose{
    width: 1000px;
    margin: auto;
    margin-bottom: 80px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.title_{
    width: auto;
    margin: auto;
    text-align: center;
    padding-bottom: 50px;
}

.replies{
    position: fixed;
    width: 450px;
    z-index: 9999;
    left: 50%;
    bottom: 2%;
    margin-left: -350px;
    animation: replies .5s ease-in-out 0s 1 forwards ;
}
.characters_li {
    background-image:-webkit-linear-gradient(45deg,red,#fd8403,yellow);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    display: inline-block;
    animation: characters_ .8s ease-out 0s forwards;
    animation-delay: var(--i);
}
@keyframes characters_ {
    0% {
        transform: translateY(0);
    }
    60% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0);
    }
}
 .time_clock{
    animation: clock_ .5s ease-out 0s 1 forwards;
     color: #8f8c8c;
}
@keyframes clock_ {
    0% {
        transform: scale(0);
    }
    80% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes replies {
    0%{
        transform: scale(0);


   }100%{
        transform: scale(1);

      }
}
.replies span{
    position: absolute;
    cursor: pointer;
    font-size: 20px;
    top: 2%;
    right: 1%;
    color: #222222;
    z-index: 999;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    border-radius: 50%;
    background: rgba(143, 140, 140, 0.5);
}
.replies span:hover{
    opacity: .8;
}
@media (min-width:0px) and (max-width: 600px){
    .me{
        left: 8%;
    }
    .she{
        right: 8%;
    }
}
@media (min-width:1000px) and (max-width: 1200px){
    .me{
        left: 25%;
    }
    .she{
        right: 25%;
    }

}
@media (min-width:600px) and (max-width: 1000px) {
    .me {
        left: 10%;
    }
    .she {
        right: 10%;
    }
}
@media (min-width:0px) and (max-width: 1000px) {
    .choose{
        flex-direction: column;
        width: 380px;
    }
    .variation{
        width: 380px;
        margin-bottom: 20px !important;
    }
}
@media (min-width:0px) and (max-width: 600px) {
    .replies{
        top: 10%;
        bottom: auto;
        width: 340px;
        left: 100%;
        margin-left: -390px;
    }
    h1{
        font-size: 2rem !important;
    }
}

</style>